<template>
    <div class="header">
      <h3 class="title">
        <span>{{ router.currentRoute.value.meta.title }}</span>
        <el-icon :size="16" class="title-icon">
          <i-ep-ArrowRightBold />
        </el-icon>
      </h3>
      <div class="headerBtn">
        <el-button @click="showDialog" plain>密码重置</el-button>
        <el-button @click="logout" plain type="danger" style="margin-left:8px">退出登录</el-button>
      </div>
  
      <el-dialog v-model="dialogVisible" title="密码重置" width="30%">
        <div>
          <el-input class="el-input" v-model="password_old" type="password" placeholder="请输入原始密码" show-password />
          <el-input v-model="password_new" type="password" placeholder="请输入新密码" show-password />
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="setPassword">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <el-divider />
  </template>
  <script setup>
  import { ref, inject } from 'vue'
  import useUserStore from '@/store/index.js'
  import { useRouter } from 'vue-router'
  const $axios = inject('$axios')
  const $root = inject('$root')
  const store = useUserStore();
  const router = useRouter()
  const dialogVisible = ref(false)
  const password_old = ref("")
  const password_new = ref("")
  /* 登出 */
  const logout = () => {
    store.removeUserData()
    router.push('/login')
  }
  /* 展示对话框 */
  const showDialog = () => {
    dialogVisible.value = true
  }
  /* 重置密码 */
  const setPassword = () => {
    dialogVisible.value = false
    $axios.post($root + `/admin/changePassword/`, {
      "new_password": password_new.value,
      "old_password": password_old.value
    })
      .then(r => {
        console.log(r)
        if (r.data.code == 200) {
          store.removeUserData()
          router.push('/login')
          ElMessage({
            message: '密码已重置,请重新登录',
            type: 'warning',
          })
        }
        else {
          ElMessage('密码重置失败')
        }
      })
  }
  </script>
  <style scoped>
  .header,
  .headerBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    color: #545c64;
  }
  .title-icon{
    position: relative;
    top: 3px;
    left: 3px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  .el-input {
    margin-bottom: 20px;
  }
  </style>